<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/home" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                就近加油
            </h1>
            <div class="pr search1">
                <input type="text" v-model="input" placeholder="输入需要搜索的内容" />
                <img @click="searchText" src="../../../assets/img/car-refuel/search.png" alt="">
            </div>
            <a @click="$router.push('/refuel/refuelMap')"><span>地图<br />模式</span></a>
        </header>
        <main>
            <div class="number">
                <button v-for="el in numArr" @click="getNum(el)">{{ el }}</button>
            </div>
            <div class="info" v-for="(el, index) in dataArr" @click="goDetails(index)" :key="el.id">
                <h1 class="fn">{{ el.name }}<span>556m</span></h1>
                <p><span>满200减20</span><span>满500减60</span></p>
                <div class="content">
                    <img :src="el.gatePicture" alt="">
                    <div>
                        <p>营业时间：周一至周五</p>
                        <p>￥5.66/升</p>
                        <p class="address">{{ el.address }}
                            <img @click="$router.push('/using/navigation')" src="../../../assets/img/car-refuel/plane2.png"
                                alt="">
                        </p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { refuelList } from '../../../api/using';

export default {
    data() {
        return {
            index: 0,
            input: '',
            dataArr: [],
            numArr: ['90#', '92#', '93#', '95#', '97#', '98#'],
            num: '',
            coord: '',
            timer: ''
        };
    },
    mounted() {
        this.init();
        if (!this.timer) {
            this.timer = setInterval(() => {
                this.initCoord();
                if (this.coord) {
                    clearInterval(this.timer);
                }
            }, 1000);
        }
    },
    methods: {
        init() {
            refuelList({
                categoryId: 1,
                oilNum: this.num,
                business: this.input
            })
                .then(r => {
                    this.dataArr = r.data;
                })
                .catch(e => {
                });
        },
        initCoord() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((p) => {
                    var wd = p.coords.latitude;
                    var jd = p.coords.longitude;
                    var nowdate = new Date();
                    this.coord = nowdate.toLocaleString() + "，维度是：" + wd + "，经度是：" + jd;
                }, (e) => {
                    console.log('e', e);
                    this.coord = JSON.stringify(e);
                });
            }
            else {
                this.coord = '获取定位失败';
            }
        },
        goDetails(index) {
            this.index = index;
            this.$router.push({
                path: '/using/details',
                query: {
                    categoryId: 1,
                    index: index
                }
            });
        },
        searchText() {
            this.init();
        },
        getNum(el) {
            this.num = el;
            this.init();
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    padding-top: 60rem;
    height: 434rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

header .search1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 19rem 0 40rem;
}

header .search1 input {
    width: 557rem;
    height: 80rem;
    background-color: #f7f7f7;
    outline: none;
    border: 0;
    border-radius: 40rem;
    padding-left: 28rem;
    font-size: 22rem;
}

header .search1 input::placeholder {
    color: #c7c7c7;
    font-size: 20rem;
}

header .search1 img {
    width: 27rem;
    height: 26rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 33rem;
}

header a {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 99rem;
    height: 99rem;
    color: #fff;
    background: url(../../../assets/img/car-refuel/circle.png) no-repeat;
    background-size: 100%;
}

header a span {
    font-size: 22rem;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main .number {
    overflow: hidden;
    position: relative;
    top: -177rem;
    padding-left: 22rem;
    margin-bottom: 30rem;
}

main .number button {
    float: left;
    width: 102rem;
    height: 52rem;
    border: 1px solid #fff;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    line-height: 52rem;
    color: #fff;
    border-radius: 10rem;
    margin-right: 9rem;
    font-size: 22rem;
}

main {
    padding: 0 20rem;
}

main .info {
    position: relative;
    top: -177rem;
    border-radius: 20rem;
    background-color: #fff;
    padding: 40rem 30rem 40rem 32rem;
    margin-bottom: 20rem;
}

main .info h1 {
    font-size: 29rem;
    margin-bottom: 21rem;
}

main .info h1 span {
    font-size: 20rem;
    float: right;
    color: #0071fd;
    line-height: 39rem;
}

main .info>p {
    margin-bottom: 27rem;
}

main .info>p span {
    display: inline-block;
    padding: 4rem 10rem;
    color: #ff4000;
    background-color: #ffece5;
    font-size: 18rem;
    border-radius: 10rem;
    text-align: center;
    margin-right: 10rem;
}

main .info .content {
    display: flex;
}

main .info .content>img {
    width: 205rem;
    height: 139rem;
    margin-right: 30rem;
}

main .info .content div {
    font-size: 20rem;
    align-self: center;
}

main .info .content div p:nth-child(2) {
    color: #ff4000;
    font-size: 22rem;
    margin: 10rem 0 14rem 0;
}

main .info .content div img {
    width: 23rem;
    height: 24rem;
    vertical-align: middle;
    margin-left: 22rem;
}
</style>